<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <span style="font-size: 18px;font-weight: bold">修改密码</span>
            </div>

            <el-card>
                <div style="display: flex;">

                    <img src="../../assets/img/微信图片_20240114171523.jpg" alt="" width="450" height="450"
                         style="margin: 20px 90px">

                    <div style="margin-top: 90px;margin-left: 50px">
                        <el-form :model="account" :rules="rules" ref="changePasswordRef">

                            <el-form-item prop="password">
                                <el-input style="width: 400px" prefix-icon="el-icon-lock" show-password clearable
                                          v-model="account.password" placeholder="请输入现在使用的密码"></el-input>
                            </el-form-item>


                            <el-form-item prop="newPassword">
                                <el-input style="width: 400px" prefix-icon="el-icon-lock" show-password clearable
                                          v-model="account.newPassword" placeholder="请输入新密码"></el-input>
                            </el-form-item>


                            <el-form-item prop="confirmPassword">
                                <el-input style="width: 400px" prefix-icon="el-icon-lock" show-password clearable
                                          v-model="confirmPassword" placeholder="请再次输入新密码"></el-input>
                            </el-form-item>


                            <el-form-item prop="code">
                                <div style="display: flex;justify-content: center;align-items: center">
                                    <el-input prefix-icon="el-icon-place" clearable v-model="account.code"
                                              placeholder="请输入验证码"></el-input>
                                    <div style="flex: 1;margin-left: 30px">
                                        <valid-code @update:value="getCode"
                                                    style="height: 36px;width: 80px"></valid-code>
                                    </div>
                                </div>
                            </el-form-item>

                            <el-form-item>
                                <el-button style="margin: 50px 40px 0 30px;width: 150px" type="primary"
                                           @click="changePassword"> 修 改 密 码
                                </el-button>
                                <el-button style="width: 150px" @click="reset('changePasswordRef')"> 重 置</el-button>
                            </el-form-item>

                        </el-form>
                    </div>

                </div>
            </el-card>


        </el-card>
    </div>
</template>


<script>
import {defineComponent} from 'vue'
import ValidCode from "@/conponents/ValidCode.vue";

export default defineComponent({
    name: "ChangePassword",
    components: {
        ValidCode
    },
    data() {

        // 自定义校验规则
        const validateCode = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入验证码'))
            } else if (this.account.code.toLowerCase() !== this.code) {
                callback(new Error('验证码错误'))
            } else {
                callback()
            }
        };

        // 确认密码校验
        const validatePassword = (rule, confirmPassword, callback) => {
            if (this.confirmPassword === '') {
                callback(new Error('请确认密码'))
            } else if (this.confirmPassword !== this.account.newPassword) {
                callback(new Error('两次输入的密码不一致'))
            } else {
                callback()
            }
        };


        return {
            // 验证码
            code: '',
            // 输入的密码信息
            account: {
                password: '',
                newPassword: '',
                code: ''
            },
            confirmPassword: '',
            rules: {         // 校验规则
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, message: '密码最少为6个字符', trigger: 'blur'}
                ],
                newPassword: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, message: '密码最少为6个字符', trigger: 'blur'}
                ],
                confirmPassword: [
                    {validator: validatePassword, trigger: 'blur'}
                ],
                code: [
                    {validator: validateCode, trigger: 'blur'}
                ]
            }


        }
    },
    mounted() {
    },
    methods: {
        // 获取验证码
        getCode(code) {
            this.code = code.toLowerCase();
        },

        // 重置按钮
        reset(formName) {
            this.$refs[formName].resetFields();
            this.confirmPassword = ''
        },

        // 修改密码
        changePassword() {
            // 校验表单信息
            this.$refs['changePasswordRef'].validate((valid) => {
                if (valid) {
                    // 校验通过，发送请求
                    // 密码加密
                    this.account.password = this.$md5(this.account.password)
                    this.account.newPassword = this.$md5(this.account.newPassword)
                    this.$request.put('/store/changePassword', this.account).then(res => {
                        if (res.code === '200') {
                            this.$message.success('修改成功');
                            // 清空存储的用户信息
                            localStorage.removeItem('account');
                            this.$router.push('/login');
                        } else {
                            this.$message.error(res.msg);
                            // 刷新验证码
                            this.getCode('')
                            // 清空数据
                            this.reset('changePasswordRef')
                        }
                    })
                } else {
                    this.$message.error("请检查输入信息!");
                }
            })

        }


    }
})
</script>


<style>

.el-input {
    margin-left: 0 !important;
}

</style>